<template>
    <a-card class="grid" hoverable>
        <div class="grid-tag">
            <slot name="tag"></slot>
        </div>
        <div class="grid-title">
            <slot name="title">标题</slot>
        </div>
        <div class="grid-content">
            <slot name="content">
                <div>内容</div>
            </slot>
        </div>
      
    </a-card>
</template>

<script lang="ts" setup>import type { Menu } from '@/stores/exam';

// 定义变量
const emit = defineEmits(['callback'])
defineProps<{
    menu: Menu[]
}>()

</script>
<style lang="scss" scoped>
.grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px 20px 20px 0px;
    padding: 10px 10px 20px 10px;
    background-color: #fafafa;
    width: 400px;
    height: 220px;
    position: relative;
    .grid-tag {
        position: absolute;
        right: 20px;
        top: 10px;
    }

    .grid-title {
        word-break: keep-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 8px;
        font-weight: bold;
        color: #333;
        font-size: 16px;
    }

    .grid-content {
        font-size: 16px;
        color: #336;
        flex: 1;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


}
</style>